<template>
  <el-scrollbar v-loading="loading" class="word-file">
    <div ref="wordFileRef"></div>
  </el-scrollbar>
</template>

<script>
import * as docx from 'docx-preview';

export default {
  name: 'word-file',
  props: ['file', 'loading'],
  data() {
    return {};
  },
  watch: {
    file: {
      handler(val) {
        if (val) {
          docx.renderAsync(val, this.$refs.wordFileRef);
        }
      },
      immediate: true,
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.word-file {
  width: 100%;
  height: 100%;
  padding-right: 8px;

  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
</style>
